<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>资源管理</title>


<!-- 新 Bootstrap 核心 CSS 文件 -->  
 <link rel="stylesheet" href="css/bootstrap.min.css">
  
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->  
<!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  
 -->  
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  
<!-- <script src="js/bootstrap.min.js"></script>  
 -->
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>

 <script type="text/javascript">

<style type="text/css">
td{
	  
	  border-right:solid green 1px;margin-left:0px;
	  border-top:solid green 1px;margin-left:0px;
	   border-left:solid green 1px;margin-left:0px;
	    border-bottom:solid green 1px;margin-left:0px;
}
</style>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
	var s="---";
	var parent_code=null;
		//alert("ok");
		 $.ajax({
			url:"/focus/resource",
			type:"get",
			data:{},
			success:function(d){
				var data = d['data'];
				//alert(data[0].name);
				allResource(data,0,0,0,null)
			},
			error:function(){},
			dataType:"json"
		});
		
		 //这个跟left页面的 把树简单拿出来不同，  a是 当前菜单在第几层，b是当前的父菜单在其层中的序号，c是父菜单的父菜单在其层的序号，c用来找父菜单的id
		 //确定一个菜单的相对位置 需要  第几层、父菜单在其层的序号、当前菜单的序号，如果用 a+s+i做id 三层以上的菜单id会重合，比如两个二级菜单下的第一个菜单id就重合了
		 function allResource(data,a,b,c,d){
			 //alert("ok")
			 $.each(data,function (i,j){
				console.log(">>>>>>>>>>>",i,j);
				//alert(j['name']);
				//展开所有资源
				if(a==0){
					$("#all").append("<li id='li" + a + s + b + s + i + "'>"+j['name']+"</li>")
				}else{
					//alert("ok");
					$("#li"+(a-1)+s+c+s+b).append("<li id='li" + a + s+b+s + i + "' style='margin-left:"+10*a+"px'>"+j['name']+"</li>")
				}

				//点击一个资源，查出它的详情，给表格single添加元素
				$("#li" + a + s +b+s+ i).click(function(){
					
					//阻止冒泡事件
					event.stopPropagation();
					//alert(j['name']);
					//清空之前的表格，上个点击的资源详情					
					$("#single").children().remove()
					$("#single").append("<tr class='warning'><td width:100px;>名称 ： </td'><td width:200px;>"+j['name']+"</td></tr>")
					$("#single").append("<tr class='info'><td >类型 ： </td><td>"+j['type']+"</td></tr>")
					$("#single").append("<tr class='error'><td>资源码 ： </td><td>"+j['code']+"</td></tr>")
					$("#single").append("<tr class='success'><td>序号 ： </td><td>"+j['sort']+"</td></tr>")
					$("#single").append("<tr class='warning'><td>前端路由 ： </td><td>"+j['menuRoute']+"</td></tr>")
					$("#single").append("<tr class='info'><td>描述： </td><td>"+j['des']+"</td></tr>")
					$("#single").append("<tr class='error'><td>操作： </td><td><button id='update' class='btn btn-warning btn-primary' type='button' style='margin-right:5px'>修改</button>"+
							"<button id='authorize' class='btn btn-success btn-primary' type='button' style='margin-right:5px'>授权</button>"+
							"<button id='de' class='btn btn-danger btn-primary'>删除</button></td></tr>")
				
					//此资源节点的code，点击页面上的新增 就认为是在此节点下面添加资源
					parent_code=j['code'];
					
					//修改，给动态的 id元素 必须把事件放在  生成元素代码 的同一个函数里 才会有效，放在外面没效果
					 $("#update").click(function(){
						//alert("ok");
						window.open ("resource_update.html?name="+encodeURI(j['name'])+"&&type="+j['type']+"&&code="+j['code']+"&&id="+j['id']
								+"&&sort="+j['sort']+"&&menuRoute="+j['menuRoute']+"&&des="+j['des']+"&&parentCode="+d,
								"newwindow", "height=400px, width=400, top=200px, left=500px, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no")&nbsp; 
					});
					
					//删除
					$("#de").click(function(){
						//alert(j['id']);
						disp_confirm(j['id']);
					});
					
					//授权
					$("#authorize").click(function(){
						window.open ("resource_authority.html?id="+j['id'],
								"newwindow", "height=400px, width=1000, top=200px, left=250px, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no")&nbsp; 
					});
					
				});
				
				allResource(j['children'],a+1,i,b,j['code']); 
			});	
		} 
		 
		 //新增
		$("#save").click(function(){
			save(parent_code)
		});
		function save(parent_code){
			//alert("ok");
			//跳出新窗口，传一个参数，就是新增资源的父资源code
			window.open ("resource_save.html?parent_code="+parent_code, "newwindow", "height=400px, width=600, top=200px, left=500px, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no")&nbsp; 
		}
		
		//删除跳出 确认窗口，确定才会继续操作
		function disp_confirm(idd)
		  {
		  var r=confirm("确定要删除吗？此操作会删除资源对应的角色、权限码关系，以及下级资源都会删除")
		  if (r==true){
			  //alert(idd);
			  $.ajax({
					url:"/focus/resource/"+idd,
					type:"DELETE",
					data:{},
					success:function(d){
						if(d['status']==200){
							 alert("删除成功");
							 window.location.href = window.location.href;
						}
						if(d['status']==500){
							alert(d['data']);
						}
					},
					error:function(){},
					dataType:"json"
				});
			
		  }else {}
		  }
		
});

</script>
</head>
<body>
	 <button class="btn btn-mini btn-primary" type="button" id="save" style="float:right;margin-right:100px">新增</button>
	<div style="float:left;width:300px;margin-top:40px;border:solid;border-radius:10px;">
		<ul id="all"></ul>
	</div>
	
	<div style="margin-left:400px; margin-right:50px; width:500px; box-sizing:border-box">
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">
					<table class="table" >
						<tbody id="single">
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
				
	</div>
	
	
	
</body>
</html>